<template>
	<view class="page">
		<view class="head-top">
			<div class="logo-wrapper">
				<view class="logo">
					<image style="width: 88rpx;height: 88rpx;" 
                        src="../../static/logo2-tm.png" mode="aspectFit"></image>
                    <image style="width: 98rpx;height: 76rpx;margin-left: 12rpx;" 
                        src="../../static/logo-title.png" mode="aspectFit"></image>
				</view>
				<view class="sub-title">
					<image style="width: 300rpx;height: 72rpx" 
                        src="../../static/sub-title.png" mode="aspectFit"></image>
				</view>
			</div>
			<view class="search-wrapper"  @click="handleLink" >
                <uni-icons
                    class="search-icon"  
                    type="search" size="28" color="#b1b2b3"></uni-icons>
				<input class="uni-input"  disabled confirm-type="search" placeholder="请输入地域、银行名称等关键字" />
			</view>
		</view>
        <view class="search-hide" :class="{'is-hide': scrollTop}">
            <view class="input-bar" @click="handleLink">
                <uni-icons type="search" size="20" color="#818181"></uni-icons>
                <span class="placeholder">请输入地域、银行名称等关键字</span>
            </view>
        </view>
		<view class="diamond-container">
			<view class="panel-title"><span>热门关键词</span></view>
			<view class="hot-search">
				<view class="host-tag">农村商业银行</view>
				<view class="host-tag">农村合作社</view>
				<view class="host-tag">邮政储蓄</view>
			</view>
		</view>
		
		<view class="news-wrapper" v-show="hotShow">
			<view class="panel-title"><span>财经热点</span></view>
			<view class="news-container">
				<view class="item" v-for="item in listData" :key="item.id" @click="handleDetail(item.uniquekey)">
					<view class="item-title">
						<div class="more-overflow2">{{item.title}}</div>
						<div class="item-time">{{format(item.created_at)}}</div>
					</view>
					<view class="item-image" >
						<image mode="scaleToFill" 
                            style="width: 100%; height: 160rpx; border-radius: 5px;"
                            :src="item.thumbnail"></image>
					</view>
				</view>
                <uni-load-more :status="noMoreData ? 'noMore':'loading'"></uni-load-more>
			</view>
		</view>
        <ContactUs ref="contactUs" :isBacktop="isBacktop" />
	</view>
</template>

<script>
	import { getHotnews, getConfig } from '@/api/index.js'
	import ContactUs from '@/components/contactUs/contactUs.vue'
	export default {
		data() {
			return {
				listData: [],
                scrollTop: false,
                isBacktop: false,
                top_height: 140,
                noMoreData: false,
                loadingMore: false,
                page: 1,
                pageSize: 10,
                total: 0,
				hotShow: false
			}
		},
		onLoad() {
			//加载配置信息
			this.handleGetConfig()
			//加载热点新闻
			this.handleLoadData()
            //根据不同的运行平台 ，设置搜索框 显示/隐藏 高度
            const systemInfo = uni.getSystemInfoSync();
            if(systemInfo.uniPlatform == 'mp-weixin') {
                this.top_height = 165
            }
		},
        //下拉监听
        onPullDownRefresh() {
            this.page = 1
            this.noMoreData = false
            this.handleLoadData(true)
        },
        //上拉刷新
        onReachBottom() {
            if (this.noMoreData) return
            this.page++
            this.handleLoadData()
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop > this.top_height
            this.isBacktop = e.scrollTop > 200
        },
        components: {
            ContactUs
        },
		methods: {
			async handleGetConfig() {
				const res = await getConfig()
				this.hotShow = res.data.hotnews_show == 1
			},
            async handleLoadData(isRefresh = false) {
                if (isRefresh) {
                    uni.showLoading({ title: '加载中...' })
                } else {
                    this.loadingMore = true
                }
                try {
                    const res = await getHotnews({page: this.page, pageSize: this.pageSize})
                    if(isRefresh) {
                        this.listData = res.data.rows
                        uni.stopPullDownRefresh()
                    }
                    else {
                        this.listData = [...this.listData, ...res.data.rows]
                    }
                    this.total = res.data.total
                    this.noMoreData = this.listData.length >= this.total
                } catch (error) {
                    console.error('加载失败', error)
                    if (!isRefresh) this.pageNum--
                } finally {
                    if (isRefresh) {
                      uni.hideLoading()
                    } else {
                      this.loadingMore = false
                    }
                }
            },
			format(str) {
				return str.substr(0, 10)
			},
            handleLink() {
                //跳转到检索页面并传递参数
                uni.navigateTo({
                    url: '/pages/search/search'
                });
            },
            handleDetail(key) {
                // return
                uni.navigateTo({
                    url: '/pages/linkView/linkView?key=' + key
                })
            }
		}
	}
</script>

<style lang="less">
	@import url('./home.less');
</style>
